<#assign pageTitle="${book.title!}"/>
<#assign pageKeywords = pageTitle />
<#assign pageDescription = pageTitle />
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/course.css" />
    <link rel="stylesheet" type="text/css" href="/static/h5/css/picture.css" />
</#assign>
<#assign pageContent>
    <van-nav-bar
            :title="title"
            left-text="返回"
            right-text="首页"
            left-arrow
            @click-left="window.history.back();"
            @click-right="window.location.href='/';"
            fixed
            placeholder
    ></van-nav-bar>
    <div class="course-view">
        <div class="course-list">
            <div class="course-pic"><img src="./images/course/course-list-1.png" alt=""></div>
            <div class="course-info">
                <div class="course-name text-two">${book.title!}</div>
                <div class="course-des text-two">${book.intro!}</div>
                <div class="course-price">¥${book.price/100}</div>
            </div>
        </div>
    </div>
    <div class="infos">
        <div class="item">
            <div>
                <span>主编</span>
                <span>
                        <#if teachers?? && teachers?size gt 0>
                            <#list teachers as item>
                                <span style="margin-right: 10px;">${item.name!} </span>
                            </#list>
                        </#if>
                    </span>
            </div>
            <div>
                <span>出版社</span>
                <span>${book.publisher!}</span>
            </div>
        </div>
        <div class="item">
            <div>
                <span>出版日期</span>
                <span>${book.publishDate!}</span>
            </div>
            <div>
                <span>ISBN</span>
                <span>${book.isbn!}</span>
            </div>
        </div>
        <div class="item">
            <div>
                <span>类别</span>
                <span >${book.categoryName!}</span>
            </div>
            <div>
                <span>定价</span>
                <span>${book.price/100} 元</span>
            </div>
        </div>
        <div class="item">
            <div>
                <span>装帧</span>
                <span>${book.binding!}</span>
            </div>
            <div>
                <span>页数</span>
                <span>${book.pages!}页</span>
            </div>
        </div>
    </div>
    <div class="course-view-body book-view-box">
        <div class="box-title">
            <div class="title-name">简介</div>
        </div>
        <div class="book-view-info">
            <div style="text-indent: 32px">${book.intro!}</div>
            ${book.context!}
        </div>
        <#if bookList?? && bookList?size gt 0>
            <div class="box-title">
                <div class="title-name">喜欢这本书的人也喜欢</div>
            </div>
            <div class="course-list">
                <#list bookList as item>
                    <a href="/book/view/${item.id!}.html">
                        <div class="course-pic"><img src="${item.cover!}" alt=""></div>
                        <div class="course-info">
                            <div class="course-name text-two">${item.title!}</div>
                            <div class="course-des text-two">${item.intro!}</div>
                            <div class="course-time">${item.categoryName!}</div>
                        </div>
                    </a>
                </#list>
            </div>
        </#if>
    </div>
    <div class="view-content-footer">
        <van-goods-action-icon round type="default" :icon="isFavorite ? 'star' : 'star-o'" color="#ff5000" class="btn-favorite" @click="doFavorite()">收藏</van-goods-action-icon>
        <van-button round color="linear-gradient(to right, #fcb338, #ff6e29)" class="btn-buy" @click="doBuy">样书申请</van-button>
    </div>
    <van-popup
            v-model="bookPopup"
            closeable
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '550px' }"
    >
        <h3 class="pd-12 mt-12 mb-12">样书申请</h3>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="schoolName"
                    name="schoolName"
                    label="学校名称"
                    placeholder="请填写学校名称"
                    :rules="[{ required: true, message: '请填写学校名称' }]"
            ></van-field>
            <van-field
                    v-model="position"
                    name="position"
                    label="校内职务"
                    placeholder="请填写校内职务"
                    :rules="[{ required: true, message: '请填写校内职务' }]"
            ></van-field>
            <van-field
                    v-model="contacts"
                    name="contacts"
                    label="联系人"
                    placeholder="请输入联系人姓名"
                    :rules="[{ required: true, message: '请输入联系人姓名' }]"
            ></van-field>
            <van-field
                    v-model="mobile"
                    name="mobile"
                    label="手机号"
                    placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请输入手机号' }]"
            ></van-field>
            <van-field
                    v-model="address"
                    name="address"
                    label="地址"
                    placeholder="请输入地址"
                    :rules="[{ required: true, message: '请输入地址' }]"
            ></van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </van-popup>
</#assign>
<#assign pageScript>
    <script>
        var bookId = ${book.id};
        var userId = ${userId};
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: false,
                    activeTab:0,
                    active: 0,
                    title:'${book.title!}',
                    bookPopup: false,
                    isFavorite: ${isFavorite?c},
                    bookId: ${book.id},
                    schoolName: '',
                    position: '',
                    contacts: '',
                    mobile: '',
                    address: '',
                }
            },
            created() {

            },
            methods: {
                doFavorite(){
                    var that = this;
                    var url='';
                    if(that.isFavorite){
                        url = '/ajax/favorite/delete.json';
                    }else {
                        url = '/ajax/favorite/add.json';
                    }
                    axios.get(url, {
                        params: {
                            infoId: bookId,
                            typeId: 3
                        }
                    }).then(function (json) {
                        if (json.data.code === 0) {
                            that.isFavorite = !that.isFavorite;
                        }
                        that.$toast(json.data.msg);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                doBuy(){
                    this.bookPopup = true
                },
                onSubmit(values) {
                   var that = this;
                    var data = new FormData();
                        data.append("bookId", that.bookId)
                        data.append("schoolName", that.schoolName)
                        data.append("position", that.position)
                        data.append("contacts", that.contacts)
                        data.append("mobile", that.mobile);
                        data.append("address", that.address);
                    axios.post('/book/require/save.json',data).then(function (json) {
                        console.log(json.data)
                        if (json.data.code === 0) {
                            that.$dialog.alert({
                                title:"恭喜你，您提交的样书申请信息提交成功！"
                            });
                        } else {
                            that.$dialog.alert({
                                title:json.data.msg
                            });
                        }
                    });
                },
            }
        });
    </script>
</#assign>
<#include "../layout_h5.ftl" />